<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">出租信息</small>
      </a>
    </header>
    <main>
      <div class="seachfrom">
        <div class="seachbox">
          <el-input placeholder="请输入土地名称" v-model="seachtext">
            <el-button slot="append" icon="search" @click="seach()"></el-button>
          </el-input>
        </div>
      </div>
      <div>
          <ul class="datalist">
          <li v-for="(item,index) in listData" :key='item.unid'>
              <router-link :to='{name: "RentalInfodetail",query:{unid: item.unid,keys:1}}'>
                <div class="items-img">
                  <img src="../../../img/zhaozu.png" />
                </div>
                <div class="items-text">
                  <p>物业名称: {{item.values[5]}}</p>
                  <p>租赁面积: {{item.values[23]}}</p>
                  <p>招租环节<span>{{item.values[11]}}</span></p>
                </div>
              </router-link>
            </li> 
             <li v-for="(item,index) in listData2" :key='item.unid'>
              <router-link :to='{name: "RentalInfodetail",query:{unid: item.values[10],keys:2}}'>
                <div class="items-img">
                  <img src="../../../img/czwc.png" />
                </div>
                <div class="items-text">
                  <p>物业名称: {{item.values[0]}}</p>
                  <p>租赁面积: {{item.values[5]}}</p>
                  <p>招租环节<span>{{item.values[9]}}</span></p>
                </div>
              </router-link>
            </li> 
             <li v-for="(item,index) in listData3" :key='item.unid'>
              <router-link :to='{name: "RentalInfodetail",query:{unid: item.unid,keys:3}}'>
                <div class="items-img">
                  <img src="../../../img/qdht.png" />
                </div>
                <div class="items-text">
                  <p>物业名称: {{item.values[0]}}</p>
                  <p>租赁面积: {{item.values[5]}}</p>
                  <p>招租环节<span>{{item.values[10]}}</span></p>
                </div>
              </router-link>
            </li> 
          </ul>
         <div class="none_data" v-show="nonedata">
          <img src="../../../img/tip.png">
        </div>
        <v-backtop></v-backtop>
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  /*过滤器*/
  import {
    Loadmore
  } from 'mint-ui';
  import backToTop from '@/components/backToTop'
  import {
    LeaseManagement,ContractManagement,BidManagement
  } from '../../../api/api';
  
  export default {
    components: {
      'v-loadmore': Loadmore,
      'v-backtop':backToTop
    },
    data() {
      return {
        nonedata: false,
        PageSize:10,
        CurrentPage: 1,
        CriteriaList: [],
        listData:[],
        listData2:[],
        listData3:[],
        seachtext: '',
        nonedata: false,
      };
    },
    methods: {
      // loadTop: function() { //组件提供的下拉触发方法  
      //   //下拉刷新
      //   if (this.CurrentPage >= 0) {
      //     this.CurrentPage = 1;
      //     this.listData = [];
      //     this.getData();
      //   } else {
      //     this.listData = [];
      //     this.getData();
      //   }
      //   this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
      // },
      // loadBottom: function() {
      //   // 上拉加载  
      //   this.CurrentPage += 1;
      //   this.getData();
      //   // 上拉触发的分页查询  
      //   //this.allLoaded = true;
      //   this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
      // },
      //搜索
      seach: function() {
        this.listData = [];
        this.listData2 = [];
        this.listData3 = [];
        this.CriteriaList=this.seachtext
        this.getData();  
      },
      //数据加载方法
      getData() {
         let CurrentPageNum = this.CurrentPage
         let options  = {
          params: {
              //vc: this.PageSize,
             //vp: this.CurrentPage,
              vf:this.CriteriaList
          }
        }
        //调取接口
        LeaseManagement(options).then((res) => {
          this.listData=this.listData.concat(res)
          //  if (res.length > 0) {
          //     this.nonedata = false
          //   } else {
          //     if (CurrentPageNum == 1) {
          //       this.nonedata = true
          //     } else {
          //       this.nonedata = false
          //     }
          //   }
        })
          BidManagement(options).then((res) => {
          this.listData2=this.listData2.concat(res)
        })
         ContractManagement(options).then((res) => {
          this.listData3=this.listData3.concat(res)
        })
        
         
        
      },
    },
    computed:{
    
    },
    //页面加载时候
    mounted() {
      this.getData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
 
</style>
接口三个：
环节一招标 （一公司 二公司 三公司）
环节二公示 （二公司 三公司）
环节三中标 （一公司）

实现 列表
 一公司 环节三中标
 二公司 环节二公示
 三公司 环节一招标



